@import models.Tables.GeneinfoRow
@import models.Tables.RefseqRow
@(row: GeneinfoRow,seq:RefseqRow)
@home.main("Detail info") {


  <link rel="stylesheet" media="screen" href="@routes.Assets.at("mscroll/css/lz_index.css")">

  <style>
          th {
            width: 20%;
          }

          .myBold {
          }

          .myTd {
            max-height: 150px;
            overflow: auto;
            padding-right: 25px;
          }

          .js-plotly-plot .plotly .cursor-crosshair {
            cursor: default;
          }

  </style>
  <div class="row">
    <div class="form-group col-sm-12">
      <h2 class="page-heading">Detail info</h2>
    </div>
  </div>

  <div class="box">
    <h4 class="area">
      <span class="area_title" data-id="1">Basic</span>
      <div class="area_img">
        <img src="/assets/mscroll/img/top.png">
      </div>
    </h4>
    <div class="picture_list">

      <table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
        word-wrap: break-word">
        <tbody>
          <tr>
            <th>GeneID</th>
            <td>
            @row.geneid
            </td>
          </tr>

          <tr>
            <th>Chromosome</th>
            <td>
            @row.chr
            </td>
          </tr>
          <tr>
            <th>Start</th>
            <td>
            @row.start
            </td>
          </tr>
          <tr>
            <th>End</th>
            <td>
            @row.end
            </td>
          </tr>
          <tr>
            <th>Gene Browse</th>
            <td>
            @if(row.geneid.indexOf("EUCur") != -1) {
              <a href="http://210.22.121.250:20795/jb/index.html?data=my_data/EUCur/data&loc=@row.chr:@row.start..@row.end&tracks=DNA,Annotation,GCContent,Indel,SNP" target="_blank">
                @row.chr:@row.start..@row.end
              </a>
            } else {
              <a href="http://210.22.121.250:20795/jb/index.html?data=my_data/EUCte/data&loc=@row.chr:@row.start..@row.end&tracks=DNA,Annotation,GCContent,Indel,SNP" target="_blank">
                @row.chr:@row.start..@row.end
              </a>
            }
            </td>
          </tr>

        </tbody>
      </table>

    </div>
  </div>

  <div class="box">
    <h4 class="area">
      <span class="area_title" data-id="1">Genemo Browse</span>
      <div class="area_img">
        <img src="/assets/mscroll/img/top.png">
      </div>
    </h4>
    <div class="picture_list">
      <iframe style="border: 1px solid rgb(80, 80, 80);" src="http://210.22.121.250:20795/jb/index.html?data=my_data/RiceRC/@row.species/data&loc=@row.chr:@row.start..@row.end&tracks=DNA,Annotation&tracklist=0&nav=1&overview=0" height="250" width="100%" name="jbrowse_iframe">
      </iframe>



    </div>
  </div>

  <div class="box">
    <h4 class="area">
      <span class="area_title" data-id="1">Function</span>
      <div class="area_img">
        <img src="/assets/mscroll/img/top.png">
      </div>
    </h4>
    <div class="picture_list">
        <table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
          word-wrap: break-word">
          <tbody>
            <tr>
              <th>GO</th>
              <td id="go">
              @if(row.go.indexOf("GO") == -1) {
                @row.go
              } else {
                @for(go <- row.go.split(";").map(_.trim)) {
                  <p><a target="_blank" href="http://amigo.geneontology.org/amigo/term/@go">@go</a></p>
                }
              }
              </td>
            </tr>
            <tr>
              <th>Pfam</th>
              <td id="pfam">
              @if(row.pfam.indexOf("-") != -1) {
                @row.pfam
              } else {
                @for(pfam <- row.pfam.split(";").map(_.trim)) {
                  <p><a target="_blank" href="http://pfam.xfam.org/family/@pfam">@pfam</a></p>
                }
              }
              </td>
            </tr>

            <tr>
              <th>Interpro</th>
              <td id="ipr">
              @if(row.ipr == "-") {
                @row.ipr
              } else {
                @for(ipr <- row.ipr.split('|').map(_.trim)) {
                  <p><a href='http://www.ebi.ac.uk/interpro/entry/@ipr.substring(ipr.length - 10, ipr.length - 1)'>
                  @ipr.substring(ipr.length - 10, ipr.length - 1) </a> :
                    <span>@ipr.substring(0, ipr.length - 11)</span></p>
                }
              }
              </td>
            </tr>

            <tr>
              <th>KEGG Pathway</th>
              <td>
              @if(row.ko.indexOf("KEGG") == -1) {
                @row.ko
              } else {
                @for(ko <- row.ko.split(";").map(_.trim)) {
                  <p><a href='https://www.kegg.jp/kegg-bin/show_pathway?ko@ko.substring(6,11)' target="_blank">ko@ko.substring(6,11)   </a></p>
                }
              }
              </td>
            </tr>
            <tr>
              <th>Pathway</th>
              <td>
              @if(row.pathway == "-") {
                @row.pathway
              } else {
                @for(pathway <- row.pathway.split(";").map(_.trim)) {
                  <p>@pathway</p>
                }
              }
              </td>
            </tr>
          </tbody>
        </table>
    </div>
  </div>

  <div class="box">
    <h4 class="area">
      <span class="area_title" data-id="1">Sequence</span>
      <div class="area_img">
        <img src="/assets/mscroll/img/top.png">
      </div>
    </h4>
    <div class="picture_list">
      <table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
        word-wrap: break-word">
        <tbody>
          <tr>
            <th>Cds
              <button class="btn-link" onclick="downloadCds()"><i class="fa fa-download"></i></button>
            </th>
            <td class="monospace">
              <div class="seq">
                >@row.geneid<br>
                <div id="cds">
                @seq.cds
                </div>
              </div>

            </td>
          </tr>
          <tr>
            <th>Pep
              <button class="btn-link" onclick="downloadPep()"><i class="fa fa-download"></i></button>
            </th>
            <td class="monospace">
              <div class="seq">
                >@row.geneid<br>
                <div id="pep">
                @seq.pep
                </div>
              </div>

            </td>
          </tr>

          <tr>
            <th>Trans
              <button class="btn-link" onclick="downloadTrans()"><i class="fa fa-download"></i></button>
            </th>
            <td class="monospace">
              <div class="seq">
                >@row.geneid<br>
                <div id="trans">
                @seq.trans
                </div>
              </div>

            </td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>

@*  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title myBold"><a aria-controls="collapseOne" aria-expanded="true" data-toggle="collapse" href="#collapseOne" class="">
        Basic</a></h4>
    </div>
    <div aria-labelledby="headingOne" class="panel-collapse collapse in" id="collapseOne" role="tabpanel" aria-expanded="true" style="">
      <div class="panel-body">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
            word-wrap: break-word">
            <tbody>
              <tr>
                <th>GeneID</th>
                <td>
                @row.geneid
                </td>
              </tr>

              <tr>
                <th>Chromosome</th>
                <td>
                @row.chr
                </td>
              </tr>
              <tr>
                <th>Start</th>
                <td>
                @row.start
                </td>
              </tr>
              <tr>
                <th>End</th>
                <td>
                @row.end
                </td>
              </tr>
              <tr>
                <th>Gene Browse</th>
                <td>
                @if(row.geneid.indexOf("EUCur") != -1) {
                  <a href="http://210.22.121.250:20795/jb/index.html?data=my_data/EUCur/data&loc=@row.chr:@row.start..@row.end&tracks=DNA,Annotation,GCContent,Indel,SNP" target="_blank">
                    @row.chr:@row.start..@row.end
                  </a>
                } else {
                  <a href="http://210.22.121.250:20795/jb/index.html?data=my_data/EUCte/data&loc=@row.chr:@row.start..@row.end&tracks=DNA,Annotation,GCContent,Indel,SNP" target="_blank">
                    @row.chr:@row.start..@row.end
                  </a>
                }
                </td>
              </tr>

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title myBold"><a aria-controls="collapse2" aria-expanded="true" data-toggle="collapse" href="#collapse2" class="">
        Genemo Browse</a></h4>
    </div>
    <div aria-labelledby="headingOne" class="panel-collapse collapse in" id="collapse2" role="tabpanel" aria-expanded="true" style="">
      <div class="panel-body">
        <iframe style="border: 1px solid rgb(80, 80, 80);" src="http://210.22.121.250:20795/jb/index.html?data=my_data/RiceRC/@row.species/data&loc=@row.chr:@row.start..@row.end&tracks=DNA,Annotation&tracklist=0&nav=1&overview=0" height="250" width="100%" name="jbrowse_iframe">
        </iframe>


      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" id="gs" role="tab">
      <h4 class="panel-title myBold"><a aria-controls="collapse2" aria-expanded="true" data-toggle="collapse" href="#collapse2" class="">
        Function</a></h4>
    </div>
    <div aria-labelledby="headingOne" class="panel-collapse collapse in" id="collapse2" role="tabpanel" aria-expanded="true" style="">
      <div class="panel-body">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
            word-wrap: break-word">
            <tbody>
              <tr>
                <th>GO</th>
                <td id="go">
                   @if(row.go.indexOf("GO") == -1) {
                  @row.go
                  } else {
                  @for(go <- row.go.split(";").map(_.trim)) {
                    <p><a target="_blank" href="http://amigo.geneontology.org/amigo/term/@go">@go</a></p>
                  }
                  }
                </td>
              </tr>
              <tr>
                <th>Pfam</th>
                <td id="pfam">
                @if(row.pfam.indexOf("-") != -1) {
                  @row.pfam
                } else {
                  @for(pfam <- row.pfam.split(";").map(_.trim)) {
                    <p><a target="_blank" href="http://pfam.xfam.org/family/@pfam">@pfam</a></p>
                  }
                }
                </td>
              </tr>

              <tr>
                <th>Interpro</th>
                <td id="ipr">
                @if(row.ipr == "-") {
                  @row.ipr
                } else {
                  @for(ipr <- row.ipr.split('|').map(_.trim)) {
                    <p><a href='http://www.ebi.ac.uk/interpro/entry/@ipr.substring(ipr.length - 10, ipr.length - 1)'>
                    @ipr.substring(ipr.length - 10, ipr.length - 1) </a> :
                      <span>@ipr.substring(0, ipr.length - 11)</span></p>
                  }
                }
                </td>
              </tr>

              <tr>
                <th>KEGG Pathway</th>
                <td>
                @if(row.ko.indexOf("KEGG") == -1) {
                  @row.ko
                } else {
                  @for(ko <- row.ko.split(";").map(_.trim)) {
                    <p><a href='https://www.kegg.jp/kegg-bin/show_pathway?ko@ko.substring(6,11)' target="_blank">ko@ko.substring(6,11)   </a></p>
                  }
                }
                </td>
              </tr>
              <tr>
                <th>Pathway</th>
                <td>
                @if(row.pathway == "-") {
                  @row.pathway
                } else {
                  @for(pathway <- row.pathway.split(";").map(_.trim)) {
                    <p>@pathway</p>
                  }
                }
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" id="gs" role="tab">
      <h4 class="panel-title myBold"><a aria-controls="collapse2" aria-expanded="true" data-toggle="collapse" href="#collapse3" class="">
        Sequence</a></h4>
    </div>
    <div aria-labelledby="headingOne" class="panel-collapse collapse in" id="collapse3" role="tabpanel" aria-expanded="true" style="">
      <div class="panel-body">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
            word-wrap: break-word">
            <tbody>
              <tr>
                <th>Cds
                  <button class="btn-link" onclick="downloadCds()"><i class="fa fa-download"></i></button>
                </th>
                <td class="monospace">
                  <div class="seq">
                    >@row.geneid<br>
                    <div id="cds">
                      @seq.cds
                    </div>
                  </div>

                </td>
              </tr>
              <tr>
                <th>Pep
                  <button class="btn-link" onclick="downloadPep()"><i class="fa fa-download"></i></button>
                </th>
                <td class="monospace">
                  <div class="seq">
                    >@row.geneid<br>
                    <div id="pep">
                    @seq.pep
                    </div>
                  </div>

                </td>
              </tr>

              <tr>
                <th>Trans
                  <button class="btn-link" onclick="downloadTrans()"><i class="fa fa-download"></i></button>
                </th>
                <td class="monospace">
                  <div class="seq">
                    >@row.geneid<br>
                    <div id="trans">
                      @seq.trans
                    </div>
                  </div>

                </td>
              </tr>

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>*@


  <script src="@routes.Assets.at("mscroll/js/mscroll.js")" type="text/javascript"></script>



  <script>





          function downloadCds() {
            var fileName = "@row.geneid" + "_cds.fa";
            var content = ">@row.geneid\n" + $("#cds").text().trim();
            var blob = new Blob([content], {
              type: "text/plain;charset=utf-8"
            });
            saveAs(blob, fileName)
          }

          function downloadPep() {
            var fileName = "@row.geneid" + "_pep.fa";
            var content = ">@row.geneid\n" + $("#pep").text().trim();
            var blob = new Blob([content], {
              type: "text/plain;charset=utf-8"
            });
            saveAs(blob, fileName)
          }


          function downloadTrans() {
            var fileName = "@row.geneid" + "_trans.fa";
            var content = ">@row.geneid\n" + $("#trans").text().trim();
            var blob = new Blob([content], {
              type: "text/plain;charset=utf-8"
            });
            saveAs(blob, fileName)
          }

  </script>


}

